<template>
  <div ref="refNavSwiper" class="nav-swiper-wrap">
    <van-swipe :loop="false" :autoplay="'none'" indicator-color="#3A75C5">
      <van-swipe-item v-for="(item, index) in navList" :key="index">
        <div class="nav-item" v-for="(val, key) in item" :key="key" @click="onClick(val)">
          <div class="image">
            <img :src="convertImgSrc(val.iconUrl)" />
          </div>
          <p class="ellipsis">{{val.cloudMapName}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { IDNavItem } from '../index.vue'
import { convertImgSrc } from '@/utils/index'
defineOptions({
  name: 'NavSwiper'
})

interface IProp {
  list: IDNavItem[];
}

const props = defineProps<IProp>();

const emit = defineEmits(['switch'])

const navList = ref<IDNavItem[]>([])

const menuPages = (list: IDNavItem[]) => {
  let pages = [] as any[];
  list.forEach((item, index) => {
    let page = Math.floor(index / 5);

    if (!pages[page]) {
      pages[page] = [];
    }
    
    pages[page].push(item);
  });
  
  return pages;
}
watch(
  () => props.list,
  (val) => {
    navList.value = menuPages(val);
  }
);

const router = useRouter()

const onClick = (item) => {
  window.open(item.url)
}

</script>

<style lang="less" scoped>
.nav-swiper-wrap {
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  padding: 0 10px;
  margin: 0 11px 12.5px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.03);
  .van-swipe{
    padding: 5px 0 15px;
    :deep(.van-swipe__indicators){
      bottom: 8px;
      .van-swipe__indicator{
        width: 4px;
        height: 4px;
        opacity: 1;
        background: #d9d9d9;
      }
      .van-swipe__indicator--active{
        width: 11px;
        border-radius: 4px;
      }
    }
  }
  .nav-item{
    color: #666666;
    font-size: 12px;
    width: 18%;
    float: left;
    margin: 0 1%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    p{
      width: 110%;
      text-align: center;
    }
    .image{
      width: 37px;
      min-height: 29px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;
      img{
        max-width: 100%;
      }
    }
  }
}
</style>
